$(document).ready(function() {
   $('.search').click(function() {

   });

    $('#query').select2({
        placeholder: "All Proteins",
        tokenSeparators: [";", " "],
        minimumInputLength: 3,
        ajax: {
            url: "/NCI60/Query/suggest",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function (term, page) { // page is the one-based page number tracked by Select2
                return {
                    query: term, //search term
                    max: 10, // page size
                    offset: page // page number
                };
            },
            results: function (data, page) {
                var more = (page * 10) < data.total; // whether or not there are more results available

                // notice we return the value of more so Select2 knows if more results can be loaded
                return {results: data.elements, more: more};
            }
        },
        formatResult: queryFormatResult, // omitted for brevity, see the source of this page
        formatSelection: queryFormatSelection, // omitted for brevity, see the source of this page
        dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
        tags: ['']
    });
    $('.select2-default').css('width', '120px');
    $(window).resize(function(){
       resizeLeft();
    });
    resizeLeft();
 });


function resizeLeft(){
    var size = $('.mainPage .text').width();
    $('.mainPage .text .left').width(size-380);
}

function queryFormatResult(element) {
        if(element.type=='uniprot'){element.show='Protein Name'}else{element.show=element.type}
        var markup = "<div class='result "+element.type+"'>";
        markup += "<div class='type'>"+element.show+":</div>";
        markup += "<div class='name'>"+element.name+"</div>";
        markup += "<div class='full'>"+element.full+"</div></div>";
        return markup;
    }

function queryFormatSelection(element) {
    return "<div class='"+element.type+"'>"+element.name+"</div>";
}
